<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="sidebar">
	<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">
	
	   <h:panelGroup style="width:100%;text-align:center;">
		 
		</h:panelGroup>
		<h:form id="MiscReimbursment">
		<p:growl/>
		<h:panelGrid>
		<h:outputText value="Miscellaneous Expense Form" styleClass="outputTextTitle" style="margin-left:5px;"/>
		
		<h:panelGrid columns="3"  columnClasses="gridCellMiddleLeftAligned, gridCellMiddleRightAligned">
		    <h:outputLabel value="Select" />
		    <h:outputLabel value=":" />
			<p:menuButton value="#{createMiscReimbursementBean.selectedButton}">
				
				<p:menuitem value="Create Miscellaneous Expense" actionListener="#{createMiscReimbursementBean.buttonChangeListner}" update="@form"></p:menuitem>
				<p:menuitem value="Edit/View Miscellaneous Expense" actionListener="#{createMiscReimbursementBean.buttonChangeListner}" update="@form"></p:menuitem>
					
			</p:menuButton>
		</h:panelGrid>
		
		
         <h:panelGrid rendered="#{createMiscReimbursementBean.createMiscExpenseForm}">
         <p:panel header="Employee Details"> 
             <h:panelGrid columns="8" cellspacing="8" columnClasses="gridCellMiddleLeftAligned,employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText, gridCellMiddleLeftAligned,employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText">
         
						<h:outputLabel value="*" style="color : red;"/>
						<h:outputLabel value="Misc. Expense Code" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{createMiscReimbursementBean.miscExpense.miscExpenseCode}" />
						
						<h:outputLabel value=" " style="color : red;"/>
						<h:outputLabel value="#{msg['requestdate.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{createMiscReimbursementBean.miscExpense.requestDate}">
							<f:convertDateTime pattern="dd-MMM-yyyy HH:mm a" timeZone="#{createMiscReimbursementBean.timeZone}"/>
						</h:outputLabel>
						
						<h:outputLabel value=" " style="color : red;"/>
						<h:outputLabel value="#{msg['employeename.label']}" />
						<h:outputLabel value=":" />						
						<h:outputLabel value="#{createMiscReimbursementBean.miscExpense.employee.firstName} #{createMiscReimbursementBean.miscExpense.employee.lastName}"/>

						<h:outputLabel value=" " style="color : red;"/>
						<h:outputLabel value="Employee Code" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{createMiscReimbursementBean.miscExpense.employee.employeeCode}" />
						
						<h:outputLabel value=" " style="color : red;"/>
						<h:outputLabel value="#{msg['dept.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{createMiscReimbursementBean.miscExpense.employee.moduleName}"  />
						
						<h:outputLabel value=" " style="color : red;"/>
						<h:outputLabel value="#{msg['designation.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{createMiscReimbursementBean.miscExpense.employee.designation}" />
						
						<h:outputLabel value=" " style="color : red;"/>
						<h:outputLabel value="Approval By" />
						<h:outputLabel value=":" />						
						<h:outputLabel value="#{createMiscReimbursementBean.vicePresident.firstName} #{createMiscReimbursementBean.vicePresident.lastName}"/>

						<h:outputLabel value=" " style="color : red;"/>
						<h:outputLabel value="#{msg['place.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{createMiscReimbursementBean.miscExpense.employee.location}"  />
						
			 </h:panelGrid>
					
			 <h:outputText value="Expense Details" styleClass="outputTextSubTitle" />					
			 <h:panelGrid columns="5" cellspacing="8" columnClasses="gridCellMiddleLeftAligned,employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText">
						
						<h:outputLabel value="*" style="color : red;"/>
						<h:outputLabel value="#{msg['purpose.label']}" />
						<h:outputLabel value=":" />
						<p:inputTextarea autoResize="false" rows="3" value="#{createMiscReimbursementBean.miscExpense.expensePurpose}" />
						<h:outputLabel value="" />

						<h:outputLabel value="*" style="color : red;"/>
						<h:outputLabel value="#{msg['location.label']}" /> 
						<h:outputLabel value=":" />
						<p:inputText value="#{createMiscReimbursementBean.miscExpense.expenseLocation}" />
						<h:outputLabel value="" />
						
						<h:outputLabel value="" />
						<h:outputText value="Advance Taken" />
		                <h:outputText value=":"/>
	                	<p:inputText id="AdvanceTaken" value="#{createMiscReimbursementBean.miscExpense.advanceTakenAmount}" maxlength="5" style="vertical-align: top;"/>
	                    <p:selectOneMenu value="#{createMiscReimbursementBean.miscExpense.advanceTakenCurrency}" style="width: 160px;">
				             <f:selectItem itemLabel="--Choose One--" itemValue="" />
				             <f:selectItems value="#{createMiscReimbursementBean.currencyMap}"/> 
				        </p:selectOneMenu>
		               
		                
						
			 </h:panelGrid>
 					
 		     <h:outputText value="Miscellaneous Expenses Details" styleClass="outputTextSubTitle" /> 			      
             <h:panelGrid columns="8" cellspacing="8" columnClasses="gridCellMiddleLeftAligned,employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText, gridCellMiddleLeftAligned,employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText">
             		
             		 <h:outputLabel value="*" style="color : red;"/>
             		 <h:outputText value="#{msg['date.label']}" />
		             <h:outputText value=":" />
		             <p:calendar  value="#{createMiscReimbursementBean.miscExpenseDetails.billDate}" pattern="dd-MMM-yyyy"/>
        
		             <h:outputLabel value="*" style="color : red;"/>
		             <h:outputText value="Bill Descriptio/Bill of" />
		             <h:outputText value=":" />
		             <p:inputText value="#{createMiscReimbursementBean.miscExpenseDetails.billDesc}" />
                
		             <h:outputLabel value="" />
		             <h:outputText value="Bill no" />
		             <h:outputText value=":" />
		             <p:inputText  value="#{createMiscReimbursementBean.miscExpenseDetails.billNo}" />
		             
		             <h:outputLabel value="" />
		             <h:outputText value="Amount" />
		             <h:outputText value=":" />
		             <p:inputText id="MiscAmount" value="#{createMiscReimbursementBean.miscExpenseDetails.amount}" maxlength="5"/>
	      
		             <h:outputLabel value="" />
		             <h:outputText value="Currency" /> 
		             <h:outputText value=":" />
		             <p:selectOneMenu value="#{createMiscReimbursementBean.miscExpenseDetails.currency}" style="width: 160px;">
		              	<f:selectItems value="#{createMiscReimbursementBean.currencyMap}"/>
		             </p:selectOneMenu>
		             
		             <h:outputLabel value="" />
		             <h:outputText value="Bill Attached" />
		             <h:outputText value=":" />
		             <p:selectOneMenu value="#{createMiscReimbursementBean.miscExpenseDetails.billAttached}" style="width: 160px;">
			              <f:selectItem itemLabel="Yes" itemValue="Yes"/>
			              <f:selectItem itemLabel="No" itemValue="No"/>
		             </p:selectOneMenu> 
		              
		              <h:inputHidden/><h:inputHidden/><h:inputHidden/>	<h:inputHidden/> <h:inputHidden/><h:inputHidden/><h:inputHidden/>	          
		              <h:panelGroup>
		                <p:commandButton value="Add" actionListener="#{createMiscReimbursementBean.addMiscExpenseDetailsAction}" update="@form"/>
		                <p:commandButton value="Reset" actionListener="#{createMiscReimbursementBean.resetMiscExpenseDetailsAction}" ajax="false"/>
		              </h:panelGroup> 
             </h:panelGrid>
            
                      
            <p:dataTable id="miscExpensesDetails" value="#{createMiscReimbursementBean.miscExpensesDetailsList}" var="miscExpenseDetails" binding="#{createMiscReimbursementBean.assignedMiscExpenseDetailsList}">  
  
	            <p:column headerText="#{msg['date.label']}">
	                <h:outputText value="#{miscExpenseDetails.billDate}">
	                  <f:convertDateTime pattern="dd-MMM-yyyy" timeZone="#{createMiscReimbursementBean.timeZone}"/>
	                </h:outputText>  
	            </p:column>  
	  
	            <p:column headerText="#{msg['billmode.label']}"> 
	                <h:outputText value="#{miscExpenseDetails.billDesc}" />  
	            </p:column> 
	            
	            <p:column headerText="#{msg['billno.label']}">  
	                <h:outputText value="#{miscExpenseDetails.billNo}" />  
	            </p:column>  
	            
	            <p:column headerText="Amount"> 
	                <h:outputText value="#{miscExpenseDetails.amount}"  />  
	            </p:column> 
	             
	            <p:column headerText="Currency">  
	                <h:outputText value="#{miscExpenseDetails.currency}" />  
	            </p:column> 
	             
	            <p:column headerText="#{msg['billattached.label']}"> 
	                <h:outputText value="#{miscExpenseDetails.billAttached}" />  
	            </p:column> 
	              
	            <p:column headerText="Remove" style="text-align: center; width: 30px;">		
					<p:commandButton icon="ui-icon-close" title="Remove from list"
								actionListener="#{createMiscReimbursementBean.removeMiscExpensesDetails}"
								update="@form" style="padding: 0"/>	
			    </p:column>  
          </p:dataTable>  
        
        <br/><br/>
        
        <h:outputText value="Expenses report summary total" styleClass="outputTextSubTitle" />
        
	        <p:dataTable style="width:40%;" value="#{createMiscReimbursementBean.currencies}" var="currency" >  
	           
	            <p:column headerText="Amount"> 		                
	                    <h:outputText value="#{currency.amount}" style="float:right;" />		               	               
	            </p:column>  
	             <p:column headerText="Currency"> 		                
	                    <h:outputText value="#{currency.currency}" />		               	               
	            </p:column> 
			  
	         </p:dataTable>   
      
       
  		 
         
	    </p:panel>	
	    
	   	<h:panelGroup style="float:right;">
			<p:commandButton actionListener="#{createMiscReimbursementBean.confirmationAction}" update="@form" value="Submit" />
			<p:commandButton value="Back" onclick="history.back();"  />
			<p:commandButton value="Home" action="wudashboard" /> 
	    </h:panelGroup>		
        
      </h:panelGrid>
      
        <!-- SELECT MISEXPENSE ID HERE TO SEARCH -->
        <h:panelGrid id="expenseform" rendered="#{not createMiscReimbursementBean.createMiscExpenseForm}">
         <p:panel header="View/Edit Miscellaneous Expense Form">
         <p:dataTable paginator="true" rows="25" value="#{createMiscReimbursementBean.miscExpenseList}" var="miscexpense" >  
	  
	            <p:column headerText="S.No"> 
	                <h:outputText value="#{miscexpense.sNo}" />
	            </p:column>  
	            
	            <p:column headerText="Expense Code"> 
	                <h:outputText value="#{miscexpense.miscExpenseCode}" />
	            </p:column>  		  
	           
	            <p:column headerText="Request Date">
	                <h:outputText value="#{miscexpense.requestDate}" >
	                	<f:convertDateTime pattern="dd-MMM-yyyy HH:mm a"/>
	                </h:outputText>    
	            </p:column> 
	            
	             <p:column headerText="Purpose" >  
	                <h:outputText value="#{miscexpense.expensePurpose}" />  
	            </p:column>  
	            
	             <p:column headerText="Approver Status" >  
	                <h:outputText value="#{miscexpense.expenseStatus}" />  
	            </p:column>  
	            
	            <p:column headerText="Edit"> 
	                <p:commandButton action="#{createMiscReimbursementBean.editExpenseFormAction}" value="EDIT" disabled="#{miscexpense.expenseStatus eq 'APPROVED'}">			
						<f:param id="miscExpenseCode" name="miscExpenseCode" value="#{miscexpense.miscExpenseCode}" />
					</p:commandButton>
	            </p:column>
	            
	            <p:column headerText="View/Print"> 
	                <p:commandButton action="#{createMiscReimbursementBean.viewExpenseFormAction}" value="VIEW">			
						<f:param  name="miscExpenseCode" value="#{miscexpense.miscExpenseCode}" />
					</p:commandButton>
	            </p:column>
	  
	            </p:dataTable>  
	            </p:panel>   
        </h:panelGrid>
        <p:confirmDialog widgetVar="confirmation" id="confirmation" severity="alert" message="This will submit your misc. expense request. Proceed?">
				<h:panelGroup style="text-align: right; float: right;">
					<p:commandButton value="Yes, Submit Now" action="#{createMiscReimbursementBean.submitMiscExpense}" update="@form" oncomplete="confirmation.hide()"/>
					<p:commandButton id="decline" value="Not Yet" onclick="confirmation.hide()" type="button" />
				</h:panelGroup>
		</p:confirmDialog>
        
        
		</h:panelGrid>
		</h:form>
		
	</ui:define>
</ui:composition>

